<template>
  <div>
    <label >项目: </label>
    <el-select class="margin-bottom" size="small" v-model="project" allow-create clearable filterable @change="changeProject">
      <el-option v-for="project in projects" :label="project" :value="project"/>
    </el-select>
    <el-button type="primary" size="small" :disabled="!project" class="margin-left" @click="upload.show = true">上传</el-button>

    <el-table
      :data="projectFiles"
      border
      stripe
      height="400"
      size="mini"
    >
      <el-table-column
        label="文件名"
        prop="fileName"
      />

      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="{row}">
          <el-button type="text" size="small" icon="el-icon-delete" @click="dropXmlFiles(row)">删除</el-button>
          <el-button type="text" size="small" icon="el-icon-see" @click="viewXmlFile(row)">查看</el-button>
          <el-button type="text" size="small" @click="showSqlIds(row)">sqlIds</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看 xml 文件 -->
    <el-dialog :visible.sync="dialog.show" :title="dialog.title">
      <el-input v-model="dialog.content" :autosize="{ minRows: 5, maxRows: 10}" type="textarea" :readonly="true"/>
    </el-dialog>

    <!-- 上传 xml 文件 -->
    <el-dialog :visible.sync="upload.show" title="上传 Mapper.xml 文件">
      <el-upload
        ref="upload"
        drag
        :auto-upload="false"
        action="#"
        :multiple="true"
        :on-change="changeFiles"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传 Mybatis Mapper.xml 文件 </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button class="" type="primary" size="small" @click="beginUpload">确定上传</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mybatis from '../../../api/mybatis'

export default {
  name: 'MybatisXmlFileManager',
  data(){
    return {
      projects: [],
      projectFiles: [],
      project: null,
      dialog: {
        show : false,
        title: '查看 xml 文件',
        content: null
      },
      upload: {
        show: false,
        files: []
      }
    }
  },
  methods: {
    changeProject(project){
      mybatis.projectFiles(project).then(res => {
        this.projectFiles = res.data.map(file => ({fileName: file}));
      })
    },
    showSqlIds(row){
      this.$emit('showSqlIds',this.project,row.fileName)
    },
    changeFiles(file, fileList){
      // console.log(file,'file')
      // console.log(fileList,'fileList')
      this.upload.files = fileList
    },
    beginUpload(){
      const formData = new FormData()
      // console.log(this.upload.files,'files')
      for (let i = 0; i < this.upload.files.length; i++) {
        let file = this.upload.files[i];
        formData.append('file', file.raw, file.name)
      }

      formData.append('project', this.project)
      mybatis.uploadFiles(this.project,formData).then(res => {
        this.upload.show = false
        this.refreshProjects()
      })

    },
    dropXmlFiles(row){
      mybatis.dropFiles(this.project,row.fileName).then(res => {
        this.refreshProjects()
      })
    },
    viewXmlFile(row){
      mybatis.fileContent(this.project,row.fileName).then(res => {
        this.dialog.show = true
        this.dialog.content = res.data;
      })
    },
    refreshProjects(){
      mybatis.projects().then(res => {
        this.projects = res.data;
        this.project = null;
      })
    }
  },
  mounted() {
    this.refreshProjects()
  }
}
</script>
